<template>
  <div>
    <el-dialog
      :title="$t('view')"
      :visible.sync="open"
      width="1200px"
      append-to-body
      center
    >
      <el-card class="box-card" style="margin-bottom: 20px">
        <el-descriptions :column="1">
          <el-descriptions-item :label="$t('employee_name')">{{
            form.employeeName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('record_type')">{{
            dict.label.sys_oper_type[form.recordType]
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('modified_by')">{{
            form.createBy
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('reasons')">{{
            form.changeContent
          }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="form.detailDTOList" border :max-height="tableHeight">
          <el-table-column :label="$t('modify_content')" align="center" prop="modifyContent">
          </el-table-column>
          <el-table-column :label="$t('before')" align="center" prop="modifyBefor">
          </el-table-column>
          <el-table-column :label="$t('after')" align="center" prop="modifyAfter">
          </el-table-column>
        </el-table>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">{{$t('confirm')}}</el-button>
        <el-button @click="open = false">{{$t('cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  dicts: ["contribution_plan_type", "yes_or_no", "sys_oper_type"],
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
    };
  },
  methods: {
    handleView(data) {
      console.log("🐛 ~ handleView ~ data:", data)
      this.form = data;
      this.open = true;
    },
    confirm() {
      this.$emit("confirm");
      this.open = false;
    },
  },
};
</script>
